<template>
  <div class="root" style="margin-left: 230px">
    <div class="select">
      <el-select
        v-model="labelIds"
        placeholder="请选择"
        multiple
        collapse-tags
        v-if="show"
        @change="changeLabel"
        style="display: inline-block"
      >
        <el-option-group
          v-for="group in options"
          :key="group.label"
          :label="group.label"
        >
          <el-option
            v-for="item in group.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-option-group>
      </el-select>
      <div style="width: 25%; display: inline-block; margin-left: 2%">
        <el-input placeholder="请输入内容" v-model="key">
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchGooods"
          ></el-button>
        </el-input>
      </div>
    </div>
    <div class="goods-list" v-if="goodsData.length == 0" style="width:80%">

      <el-divider content-position="left">404</el-divider>
      <span>当前条件下该地区无商品出售</span>
      <el-divider><i class="el-icon-mobile-phone"></i></el-divider>

    </div>
    <div class="goods-list" v-if="goodsData.length > 0">
      <div
        class="goods-list-card"
        v-for="item in goodsData"
        :key="item.picture"
      >
        <el-image
          style="width: 100%; height: 80%; cursor: pointer"
          :src="item.picture"
          fit="cover"
          @click="getGoodsDetailed(item.id)"
        ></el-image>
        <div
          class="title"
          @click="getGoodsDetailed(item.id)"
          style="cursor: pointer"
        >
          {{ item.goodsName }}
        </div>
        <div class="price">￥{{ item.price }}</div>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="size"
        :page-size="8"
        @current-change="currentChange"
        :current-page="$store.getters.getCurrent"
      >
      </el-pagination>
    </div>
    <Buttom style="height: 400px" />
  </div>
</template>
<script>
import Buttom from "@/components/Bottom";
import { getGoodsList, getLableList } from "@/api/productApi";
export default {
  components: {
    Buttom,
  },
  data() {
    return {
      options: [
        {
          label: "热门分类",
          options: [],
        },
        {
          label: "普通分类",
          options: [],
        },
      ],
      labelIds: "",
      goodsData: [],
      size: 0,
      labelData: null,
      show: false,
      keyWord: "",
      key: "",
    };
  },
  methods: {
    changeLabel() {
      let data = {
        page: 1,
        labelIds: this.labelIds.join(";"),
        keyWord: this.keyWord,
      };
      this.$store.commit("setCurrent", 1);
      this.getData(data);
    },
    searchGooods() {
      this.keyWord = this.key;
      let data = {
        page: 1,
        keyWord: this.keyWord,
        labelIds: this.labelIds.join(";"),
      };
      this.$store.commit("setCurrent", 1);
      this.getData(data);
    },
    getGoodsDetailed(id) {
      this.$router.push({
        path: `/home/goods_detailed/${id}`,
      });
    },
    currentChange(current) {
      this.$store.commit("setCurrent", current);
      let data = {
        page: current,
        keyWord: this.keyWord,
        labelIds: this.labelIds.join(";"),
      };
      this.getData(data);
    },
    getData(data) {
      let loading = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      getGoodsList(data)
        .then((res) => {
          if (res.code == 0) {
            this.goodsData = res.data.goodsList;
            this.size = res.data.size;
          } else {
            this.$message.error(res.messages);
          }
          loading.close();
        })
        .catch((err) => {
          this.$message.error(err);
          loading.close();
        });
    },
  },
  created() {
    // this.$store.commit("init");
    let data = {
      page: this.$store.getters.getCurrent,
      keyWord: "",
    };
    let loading = this.$loading({
      lock: true,
      text: "加载中",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)",
    });
    getGoodsList(data)
      .then((res) => {
        if (res.code == 0) {
          this.goodsData = res.data.goodsList;
          this.size = res.data.size;
        } else {
          this.$message.error(res.messages);
        }
        loading.close();
      })
      .catch((err) => {
        this.$message.error(err);
        loading.close();
      });
    getLableList().then((res) => {
      if (res.code == 0) {
        this.labelData = res.data;
        let index = 0;
        this.labelData.forEach((item) => {
          this.options[index < 2 ? 0 : 1].options.push({
            value: item.id,
            label: item.labelName,
          });
          index++;
        });
        this.show = true;
      } else {
        this.$message.error("获取分类失败" + res.message);
      }
    });
  },
};
</script>
<style lang="scss" scoped>
$reGoodsMarginTop: 1%;
$reGoodsCardMarginRight: 2.8%;
$reGoodsCardWidth: 20%;
$reGoodsCardHeight: 50%;

$titleMarginTop: 4%;
$paginationMargin: 2% 0 0 56%;
.root {
  height: 700px;
  //overflow-y:scroll ;
  //border: 1px solid green;
  .pagination {
    margin: $paginationMargin;
  }
  .select {
    margin-top: 2%;
  }
}
.goods-list {
  //border: 1px solid green;
  margin-top: $reGoodsMarginTop;
  height: 100%;
  .goods-list-card {
    //border: 1px solid red;
    width: $reGoodsCardWidth;
    height: $reGoodsCardHeight;
    margin-right: $reGoodsCardMarginRight;
    float: left;
    .title {
      text-align: left;
      font-family: 微软雅黑;
      font-style: normal;
      font-weight: normal;
      font-size: 12px;
      color: rgb(51, 51, 51);
      line-height: 1.5em;
      height: 1.5em;
      margin-top: $titleMarginTop;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .price {
      //margin-top: 9px;
      padding-bottom: 20px;
      text-align: left;
      font-family: 微软雅黑;
      font-style: normal;
      font-weight: 800;
      font-size: 16px;
      color: rgb(51, 51, 51);
    }
  }
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  color: #2eb0a8;
  background-color: #fff;
}
</style>
<style>
/*带背景的分页按钮背景色begin*/
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #08c0b9;
  color: #fff;
}
.el-pagination.is-background .el-pager li.active {
  color: #fff;
  cursor: default;
}
.el-pagination.is-background .el-pager li:hover {
  color: #08c0b9;
}
.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #08c0b9;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  background-color: #08c0b9;
  color: #fff;
}
/*带背景的分页按钮背景色end*/
</style>